import React from "react";
import { Card, Row, Col, Button, Modal } from "antd";
import "./index.less";
interface IProp {}

interface IState {
	[key: string]: boolean;
}

class UIModal extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {
			showModal1: false,
			showModal2: false,
			showModal3: false,
			showModal4: false
		};
	}

	handleOpen = (key: string): void => {
		this.setState({
			[key]: true
		});
	};

	handleConfirm = (type: string): void => {
		// 在js下可以使变量的形式调用方法Modal[type]
		// Modal[type]({

		// })

		let modalConfig = {
			title: type,
			content: type,
			onOk: () => {
				console.log("Ok");
			},
			onCancel: () => {
				console.log("Cancel");
			}
		};
		switch (type) {
			case "info":
				Modal.info(modalConfig);
				break;
			case "success":
				Modal.success(modalConfig);
				break;
			case "error":
				Modal.error(modalConfig);
				break;
			case "warning":
				Modal.warning(modalConfig);
				break;
			case "confirm":
				Modal.confirm(modalConfig);
				break;
			default:
				break;
		}
	};

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Modal</h1>
				</div>

				<Card title="基础模态框" className="button-wrap">
					<Row>
						<Col span={12}>
							<Button type="primary" onClick={() => this.handleOpen("showModal1")}>
								Open
							</Button>
							<Button type="primary" onClick={() => this.handleOpen("showModal2")}>
								自定义页脚
							</Button>
							<Button type="primary" onClick={() => this.handleOpen("showModal3")}>
								顶部20px弹框
							</Button>
							<Button type="primary" onClick={() => this.handleOpen("showModal4")}>
								水平垂直居中
							</Button>
						</Col>
					</Row>
				</Card>

				<Card title="消息模态框" className="button-wrap">
					<Row>
						<Col span={12}>
							<Button type="primary" onClick={() => this.handleConfirm("info")}>
								info
							</Button>
							<Button type="primary" onClick={() => this.handleConfirm("success")}>
								success
							</Button>
							<Button type="primary" onClick={() => this.handleConfirm("error")}>
								error
							</Button>
							<Button type="primary" onClick={() => this.handleConfirm("warning")}>
								warning
							</Button>
							<Button type="primary" onClick={() => this.handleConfirm("confirm")}>
								confirm
							</Button>
						</Col>
					</Row>
				</Card>

				<Modal
					title="Default modal"
					visible={this.state.showModal1}
					onCancel={(): void => {
						this.setState({
							showModal1: false
						});
					}}
				>
					<h2>默认的基本弹框</h2>
				</Modal>
				<Modal
					title="Custom modal"
					visible={this.state.showModal2}
					okText="完成"
					cancelText="取消"
					onCancel={(): void => {
						this.setState({
							showModal2: false
						});
					}}
				>
					<h2>自定义页脚的弹框</h2>
				</Modal>
				<Modal
					title="Top 20px"
					visible={this.state.showModal3}
					style={{ top: "20px" }}
					onCancel={(): void => {
						this.setState({
							showModal3: false
						});
					}}
				>
					<h2>顶部20px弹框</h2>
				</Modal>
				<Modal
					title="horizontal & vertical"
					visible={this.state.showModal4}
					wrapClassName="vertical-center-modal"
					onCancel={(): void => {
						this.setState({
							showModal4: false
						});
					}}
				>
					<h2>水平垂直居中</h2>
				</Modal>
			</div>
		);
	}
}

export default UIModal;
